<template>
  <el-dialog v-model:visible="dialog.visible" v-bind="dialog">
    <el-checkbox-group v-model="roleIdList" class="flex-start flex-wrap">
      <el-checkbox v-for="item in roleList" :key="item.id" class="flex align-start flex1" :label="item.id">
        <div>{{ item.name }}</div>
        <div class="description">{{ item.description }}</div>
      </el-checkbox>
    </el-checkbox-group>
    <template #footer>
      <el-button size="small" type="primary" @click="submit">确 认</el-button>
    </template>
  </el-dialog>
</template>

<script>
import { internetApi } from '@/api/api'
import { onMounted, ref, getCurrentInstance } from 'vue'

export default {
  props: {
    tableUpdate: Function
  },
  data() {
    return {
      //弹窗相关的属性
      dialog: {
        visible: false,
        title: '设置角色',
        width: '90%',
        closeOnClickModal: false
      },
      roleList: [], //角色列表
      roleIdList: [], //被选中的角色id列表
      staffId: null //员工id
    }
  },

  methods: {
    //打开弹窗
    async open(row) {
      this.staffId = row.staffId
      this.roleIdList = row.roleIds ? row.roleIds.split(',') : []
      await this.getRoleList()
      this.dialog.visible = true
    },
    //获取角色列表
    async getRoleList() {
      if (this.roleList.length === 0) {
        const res = await this.$request(internetApi.getRoleList, {
          currentPage: 1,
          pageSize: 99999
        })
        this.roleList = res.data.list
      }
    },
    //提交
    async submit() {
      const { staffId, roleIdList } = this
      await this.$request(internetApi.addStaffRole, { staffId, roleIdList })
      this.$message.success('操作成功')
      this.tableUpdate(1)
      this.dialog.visible = false
    }
  }
}
</script>

<style lang="scss" scoped>
.el-dialog__wrapper :deep(.el-dialog) {
  max-width: 500px;
}
.el-checkbox-group {
  margin-top: -10px;
  .el-checkbox {
    margin-top: 10px;
    margin-right: 0px;
    min-width: 40%;
    :deep(.el-checkbox__input) {
      display: flex;
      align-items: center;
      height: 19px;
    }
    :deep(.el-checkbox__label) {
      flex: 1;
      overflow: hidden;
      .description {
        color: #999;
        font-size: 12px;
        text-overflow: ellipsis;
        overflow: hidden;
      }
    }
    &.is-checked {
      :deep(.el-checkbox__label) {
        .description {
          color: #409eff;
        }
      }
    }
  }
}
</style>
